<template>
	<view>
		<Navbar></Navbar>
		<view class="u-form-box u-m-30">
			<u-form :model="form" label-width="200" ref="uForm">
				<u-form-item required label="求助标题">
					<u-input placeholder="请输入" input-align="right" v-model="form.title" />
				</u-form-item>
				<u-form-item required label="求助地址">
					<view class="u-text-right" :class="form.address ? '' : 'u-color-gray'" @click="openProvince">
						{{ form.address || '请选择 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="求助有效期">
					<view class="u-text-right" :class="form.finish_time ? '' : 'u-color-gray'" @click="openDate">
						{{ form.finish_time || '请选择 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="求助类型">
					<view class="u-text-right" :class="type.checkObj.label ? '' : 'u-color-gray'" @click="openType">
						{{ type.checkObj.label || '请选择 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="求助数量">
					<u-input placeholder="请输入" input-align="right" v-model="form.num"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-form-box u-m-30">
			<u-form>
				<u-form-item required label-position="top" label="求助描述">
					<view class="u-m-t-20 u-m-b-10">
						<u-input v-model="form.describe" :clearable="false" type="textarea" height="160" :auto-height="true" placeholder="请输入求助描述"
							:custom-style="customStyle" />
					</view>
				</u-form-item>
			</u-form>
			<view class="u-flex u-row-between u-p-t-20 u-p-b-20">
				<u-upload :action="action" :file-list="demandId ? fileList : undefined" max-count="4" :show-progress="false" image-mode="widthFix" width="120" height="120" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
				<view>{{imageList.length}}/4</view>
			</view>
		</view>
		<view class="u-form-box u-m-l-30 u-m-b-30 u-m-r-30 u-p-t-20 u-p-b-20" v-if="typeLabel.list[0]">
			<view class="u-flex u-row-between">
				<view class="u-font-30 u-font-bold">求助标签</view>
				<view class="u-font-24">已选择{{ typeLabel.count }}个标签</view>
			</view>
			<view class="u-flex u-flex-wrap u-m-t-20">
				<view class="resort-tag" :class="item.check ? 'check' : ''" v-for="item in typeLabel.list" :key="item.id" @click="onChooseLabel(item)">{{item.name}}</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="u-m-r-28 u-m-l-32">
			<text class="notice-tag u-p-l-16 u-p-r-16 u-m-r-16 u-p-t-4 u-p-b-4 u-font-24">注意</text>
			<text
				class="u-font-24">发布求助平台消耗{{publishIntegral}}积分，求助提交将在每天10点、15点集中审核。为提高对接成功率建议上传求助相关图片。</text>
		</view>
		<view class="u-m-r-28 u-m-l-32 u-m-t-30">
			<text class="notice-tag u-p-l-16 u-p-r-16 u-m-r-16 u-p-t-4 u-p-b-4 u-font-24">发布须知</text>
			<text class="u-font-24">{{notice}}</text>
		</view>

		<!-- 地址 -->
		<UniAddressSelector v-if="showUniAddressSelector" :selectAreaLevelLimit="3" :isSZ="0" @cancel="handleCancel"
			@confirm="handleConfirmArea"></UniAddressSelector>

		<!-- 类型 -->
		<view v-if="type.show">
			<u-select v-model="type.show" :list="type.list" :default-value="[0]" @confirm="typeConfirm"></u-select>
		</view>

		<!-- 有效期 -->
		<u-picker v-model="date.show" mode="time" :params="date.params" @confirm="dateConfirm"></u-picker>
		
		<Modal :show="modal.show" :confirmText="modal.confirmText" :modalContent="modal.content" :showCancel="modal.showCancel" @cancel="modalConfirm" @confirm="modalConfirm"></Modal>
		
		<view style="height: 200rpx;"></view>
		<Bottom :btnText="'发布求助'" @confirm="confirm"></Bottom>
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar.vue"
	import Bottom from '@/components/Bottom.vue'
	import UniAddressSelector from '@/components/UniAddressSelector.vue'
	import Modal from '@/components/Modal.vue'
	import env from '@/network/env.js'
	import { getSingleIntegral, resortTypeLabel, getDemandSuppyDetail } from '@/network/demand.js'
	import { getAgreement, singleIntegral } from '@/network/api.js'
	import { hasEmptyValue } from '@/utils/index.js'
	import {
		addSupply,
		supplyType,
		userInfo,
		editSupply
	} from '@/network/api.js'
	export default {
		components: {
			Navbar,
			Bottom,
			UniAddressSelector,
			Modal
		},
		data() {
			return {
				form: {
					title: '',
					address: '',
					finish_time: '',
					num: ''
				},
				action: `${env.baseUrl}/api/uploadOssImage`,
				imageList:[],
				remark: '',
				customStyle: {
					background: '#F2F5FA',
					borderRadius: '20rpx',
					padding: '20rpx'
				},
				provinceObj: {},
				cityObj: {},
				areaObj: {},
				type: {
					show: false,
					list: [],
					checkObj: {}
				},
				typeLabel:{
					count: 0,
					list:[]
				},
				date: {
					show: false,
					params: {
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false
					}
				},
				showUniAddressSelector:false,
				modal: {
					show: false,
					showCancel: true,
					confirmText: '申请',
					content: ''
				},
				demandId: 0,
				fileList: [],
				notice: '',
				publishIntegral: '',
				isPay: false // 是否充值
			}
		},
		onLoad(options) {
			this.getSupplyType()
			this.getRoleText()
			this.demandId = options.id || 0
		},
		methods: {
			async getSupplyType() {
				const res = await supplyType()
				res.data.map(item => {
					const params = {
						label: item.type_name,
						value: item.type_id
					}
					this.type.list.push(params)
				})
				if(this.demandId){
					this.getDemandDetail()
				}
			},
			async getRoleText(){
				const res = await getAgreement({type: 10})
				this.notice = res.data.content_two
				
				const inteRes = await singleIntegral({key: 'PublishSupply'})
				this.publishIntegral = inteRes.data.value
			},
			async getDemandDetail(){
				const params = {
					uid: uni.getStorageSync("user_id"),
					id: this.demandId
				}
				const demandRes = await getDemandSuppyDetail(params)
				this.form.title = demandRes.data.title
				this.form.address = demandRes.data.address
				this.form.finish_time = demandRes.data.finish_time.slice(0,10)
				this.form.num = demandRes.data.num
				this.form.describe = demandRes.data.describe || ''
				/* 图片 */
				demandRes.data.img.map(item=>{
					const imgData = {
						url: item
					}
					this.fileList.push(imgData)
					this.imageList.push(item)
				})
				/* 类型 */
				this.type.list.map(async item=>{
					if(item.value == demandRes.data.type){
						this.type.checkObj = item
						/* 类型标签 */
						const labelList = demandRes.data.type_label_ids.split(',')
						const labelRes = await resortTypeLabel({type_id:item.value})
						labelRes.data.map(labelItem=>{
							if(labelList.includes(labelItem.id)){
								labelItem.check = true
							}else{
								labelItem.check = false
							}
						})
						this.typeLabel.list = labelRes.data
						this.typeLabel.count = labelRes.data.filter(item=>item.check).length
					}
				})
			},
			openProvince(){
				this.showUniAddressSelector = true
			},
			handleCancel() {
				this.showUniAddressSelector = false
			},
			openDate(){
				this.date.show = true
			},
			openType(){
				this.type.show = true
			},
			handleConfirmArea(val) {
				this.showUniAddressSelector = false;
				this.form.address = val.fullAreaText
				this.provinceObj = val.provinceObj
				this.cityObj = val.cityObj
				this.areaObj = val.areaObj
			},
			async getResortLabelType(id){
				const res = await resortTypeLabel({type_id:id})
				res.data.map(item=>item.check = false)
				this.typeLabel.list = res.data
			},
			onChooseLabel(val){
				val.check = !val.check
				this.typeLabel.count = this.typeLabel.list.filter(item=>item.check).length
			},
			typeConfirm(val) {
				this.type.checkObj = val[0]
				this.getResortLabelType(val[0].value)
			},
			dateConfirm(val){
				this.date.show = false
				this.form.finish_time = `${val.year}-${val.month}-${val.day}`
			},
			onSuccess(val) {
				this.imageList.push(val.data.url)
			},
			onRemove(val) {
				this.imageList.splice(val, 1)
			},
			confirm(){
				let integral = 0
				getSingleIntegral({key: "PublishSupply"}).then(res => {
					integral = res.data.value
					userInfo({user_id:uni.getStorageSync("user_id")}).then(infoRes=>{
						if(Number(infoRes.data.integral) < Number(integral)){
							this.modal.content = '当前积分不足，无法对接，请充值后再对接'
							this.modal.confirmText = '前往充值'
							this.modal.show = true
							this.isPay = true
						}else{
							const params = {
								...this.form,
								user_id: uni.getStorageSync("user_id"),
								type: this.type.checkObj.value,
								source:1,
								is_orienteering: 0
							}
							if(hasEmptyValue(params)){
								let labelList = []
								this.typeLabel.list.filter(item=>item.check).map(item=>labelList.push(item.id))
								params.img = this.imageList.join(',')
								params.type_label_ids = labelList.join(',')
								let reqUrl = addSupply
								if(this.demandId){
									reqUrl = editSupply
									params.demand_id = this.demandId
								}
								reqUrl(params).then(res=>{
									this.modal.content = `${this.demandId ? '修改' : '发布'}成功，请等待审核`
									this.modal.confirmText = '确定'
									this.modal.show = true
									this.isPay = false
								})
							}else{
								uni.showToast({
									title: "必填项不能为空",
									icon: "none"
								})
							}
						}
					})
				})
				
			},
			modalConfirm(){
				if(this.isPay){
					uni.navigateTo({
						url: '/pages/scoreList/scoreList'
					})
				}else{
					uni.switchTab({
						url: "/pages/news/news?tabCurrent=1"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.resort-tag{
		padding: 12rpx 22rpx;
		font-size: 24rpx;
		border: 1rpx solid #fb6316;
		color: #fb6316;
		background: #fff;
		margin: 0 20rpx 15rpx 0;
		border-radius: 10rpx;
	}
	
	.check{
		background: #fb6316;
		color: #fff;
	}
	
	.notice-tag {
		border-radius: 10px 10px 10px 0px;
		background-color: #FFAA02FF;
		color: #fff;
	}
	
	::v-deep .u-input__textarea{
		line-height: initial;
	}
</style>